<template>
  <view class="user-warp u-rela" :data-theme="globPrimary">
    <u-navbar :border-bottom="false" :is-back="false" :background="navbarStyle.backgroundColor">
      <view class="navbar-left">
        <u-image
          :width="40"
          :height="40"
          src="@/static/images/pre_nav_home_blue.png"
          @click="bindLink"
          v-show="opacity >= 1"
        ></u-image>
        <u-image
          :width="40"
          :height="40"
          src="@/static/images/pre_nav_home.png"
          @click="bindLink"
          v-show="opacity < 1"
        ></u-image>
      </view>
      <view slot="right" class="navbar-right">
        <u-icon
          name="pre_nav_set"
          custom-prefix="edu-icon"
          :color="navbarStyle.iconColor"
          size="40"
          @click="onPageJump('/pageUser/setting/index')"
        ></u-icon>
        <view class="u-rela message" @click="onTokenJump('/pageUser/user/message')">
          <!-- #ifndef APP-PLUS -->
          <u-icon
            name="xinxi"
            custom-prefix="edu-icon"
            :color="navbarStyle.iconColor"
            size="40"
          ></u-icon>
          <!-- #endif -->
          <!-- #ifdef APP-PLUS -->
          <u-icon name="chat" :color="navbarStyle.iconColor" size="40"></u-icon>
          <!-- #endif -->
          <u-badge size="mini" is-dot is-center bgColor="#f54030" v-if="notify > 0"></u-badge>
        </view>
      </view>
    </u-navbar>
    <view class="u-abso user-bg-round" :style="[roundStyle]">
      <view class="u-abso user-primary-bg" :style="[roundBgStyle]"></view>
      <view class="u-abso user-bg-img"></view>
    </view>

    <view class="user-head">
      <view class="user-info u-rela">
        <edu-avatar
          :src="globUserAvatar"
          size="128"
          :showLevel="globUserInfo.vip_status == 1"
          level-icon="/static/images/headphoto_vip_icon.png"
          level-size="24"
          @click="onTokenJump('/pageUser/setting/userInfo')"
        ></edu-avatar>
        <view class="desc" v-if="globHasLogin" @click="onTokenJump('/pageUser/setting/userInfo')">
          <view class="name u-line-1">{{ globUserInfo.nick_name }}</view>
          <view class="brief u-line-1">{{ globUserInfo.signature }}</view>
        </view>
        <view class="login-btn" @tap="onTokenJump('/pageUser/login/index')" v-else>登录/注册</view>
      </view>

      <!-- 我的订单 -->
      <view class="user-order u-rela">
        <view>
          <u-section
            title="我的订单"
            sub-title="全部"
            :show-line="false"
            font-size="30"
            @click="onTokenJump('/pageUser/order/index')"
          ></u-section>
        </view>
        <u-grid :col="3" :border="false">
          <u-grid-item @click="onTokenJump('/pageUser/order/index', { type: 1 })">
            <u-image width="56rpx" height="56rpx" src="@/static/images/pre_order_fin.png"></u-image>
            <text class="order-text">已支付</text>
          </u-grid-item>
          <u-grid-item @click="onTokenJump('/pageUser/order/index', { type: 2 })">
            <u-image
              width="56rpx"
              height="56rpx"
              src="@/static/images/pre_order_daizhifu.png"
            ></u-image>
            <text class="order-text">待支付</text>
          </u-grid-item>
          <u-grid-item @click="onTokenJump('/pageUser/order/index', { type: 3 })">
            <u-image
              width="56rpx"
              height="56rpx"
              src="@/static/images/pre_order_quxiao.png"
            ></u-image>
            <text class="order-text">已取消</text>
          </u-grid-item>
        </u-grid>
      </view>
    </view>
    <view class="user-main" :style="{ marginTop: globHasLogin ? '30rpx' : '62rpx' }">
      <view class="user-main__vip" v-if="globHasLogin" @tap="onTokenJump('/pageUser/user/vip')">
        <u-image
          v-if="globUserInfo.vip_status == 0"
          :height="120"
          src="@/static/images/pre_vip_card.png"
        ></u-image>
        <u-image v-else :height="120" src="@/static/images/pre_vip_card_re.png"></u-image>
      </view>
      <view v-if="globProfileTypeset && userList.length > 0" class="user-main__list">
        <!-- 列表 -->
        <template v-if="globProfileTypeset == 1">
          <u-cell-group :border="false">
            <u-cell-item
              :title="item.title"
              v-for="item in userList"
              :key="item.id"
              :title-style="titleStyle"
              hover-class="none"
              @click="listTo(item.key)"
            >
              <u-icon slot="icon" size="40" :name="item.icon"></u-icon>
            </u-cell-item>
          </u-cell-group>
        </template>
        <!-- 九宫格 -->
        <template v-else>
          <u-grid :col="globProfileTypeset" :border="false">
            <u-grid-item v-for="item in userList" :key="item.id" @click="listTo(item.key)">
              <u-icon size="48" :name="item.icon"></u-icon>
              <view class="grid-text">{{ item.title }}</view>
            </u-grid-item>
          </u-grid>
        </template>
      </view>
    </view>
    <u-tabbar
      :list="tabbarList"
      :active-color="globPrimaryColor"
      inactive-color="#303133"
    ></u-tabbar>

    <edu-user-coupon></edu-user-coupon>
  </view>
</template>

<script>
import tabbarList from '@/settings/tabbarSetting.js'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      tabbarList,
      navbarStyle: {
        iconColor: '#ffffff',
        backgroundColor: { backgroundColor: 'rgba(0,0,0,0)' },
      },
      opacity: 0,
      notify: 0,
      userList: [],
      teacherAuthStatus: 0,
      schoolAuthStatus: 0,
      titleStyle: {
        fontSize: '28rpx',
        color: '#303133',
        marginLeft: '20rpx',
      },
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globProfileTypeset: 'projectSetting/getGlobProfileTypeset',
      globHasLogin: 'user/getHasLogin',
      globUserInfo: 'user/getUserInfo',
      globUserAvatar: 'user/getUserAvatar',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
    roundStyle() {
      let height = 0
      // #ifdef H5
      height = 200
      // #endif
      // #ifdef APP-PLUS
      height = 200
      // #endif
      // #ifdef MP-WEIXIN
      height = 200
      // #endif
      return {
        height: this.globNavbarHeight + this.globStatusBarHeight + height + 'px',
      }
    },
    roundBgStyle() {
      return {
        background: `linear-gradient(${this.globPrimaryColor} 100%,white)`,
      }
    },
  },
  onPageScroll(e) {
    this.pageScroll(e)
  },
  onShow() {
    this.getUserProfile()
    if (this.globHasLogin) {
      // 用户讲师的认证状态
      this.$edu.api.getUserTeacherAuth().then((res) => {
        const { data } = res
        this.teacherAuthStatus = data.auth_status
      })
      // 用户机构的认证状态
      this.$edu.api.getSchoolAuth().then((res) => {
        const { data } = res
        this.schoolAuthStatus = data.auth_status
      })
    }
  },
  onLoad() {},
  methods: {
    bindLink() {
      this.$edu.judgeLogin(() => {
        this.$edu.route('/pageFound/user/index', {
          id: this.globUserInfo.id,
        })
      })
    },
    getUserProfile() {
      this.$edu.api.getUserProfile().then((res) => {
        const {
          data: { user, notify, list },
        } = res

        this.notify = notify
        this.userList = list
        if (this.globHasLogin) {
          this.$store.dispatch('user/setUserInfo', user)
        }
      })
    },
    //导航栏渐变
    pageScroll(e) {
      let color = '#ffffff'
      let fontColor = '#ffffff'
      let tmpY = 200
      if (e.scrollTop > tmpY) {
        this.opacity = 1
        fontColor = '#303133'
      } else {
        this.opacity = (e.scrollTop - 150) / 80
        fontColor = '#ffffff'
      }
      let rgbaBg = this.$u.colorToRgba(color, this.opacity)
      this.navbarStyle.backgroundColor = { backgroundColor: rgbaBg }
      this.navbarStyle.iconColor = fontColor
    },
    listTo(key) {
      let url = {
        record: `/pageUser/user/list/learn/record`,
        collection: `/pageUser/user/list/learn/collection`,
        cert: `/pageUser/cert/index`,
        schedule: `/pageUser/schedule/index`,
        coupon: `/pageUser/user/list/finance/coupon`,
        my_teach: '/pageUser/teaching/index',
        my_exams: `/pageUser/exam/record`,
        my_classes: `/pageUser/user/list/classes/index`,
        balance: `/pageUser/user/balance`,
        credit: `/pageUser/user/newCredit`,
        income: `/pageUser/user/income`,
      }
      this.$edu.judgeLogin(() => {
        if (key == 'teacher') {
          let teacher = this.teacherAuthStatus == 4 ? 'create' : 'edit'
          this.$u.route(`/pageUser/user/list/operation/teacher/${teacher}`)
        } else if (key == 'school') {
          let school = this.schoolAuthStatus == 4 ? 'create' : 'edit'
          this.$u.route(`/pageUser/user/list/operation/school/${school}`)
        } else {
          this.$u.route(url[key])
        }
      })
    },
    onPageJump(url, params) {
      this.$u.route(url, params)
    },
    // 点击之前判断用户是否登录
    onTokenJump(url, params) {
      this.$edu.judgeLogin(() => {
        this.$u.route(url, params)
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.user-warp {
  padding-bottom: 30rpx;
}
.navbar-left {
  width: 100px;
  margin-left: 30rpx;
}
.navbar-right {
  margin-right: 30rpx;
  display: flex;
  align-items: center;
  .message {
    margin-left: 39rpx;
  }
}
.user-bg-round {
  width: 100%;
  height: 630rpx;
  overflow: hidden;
  top: 0;
  left: 0;
  .user-primary-bg {
    left: 50%;
    bottom: 0;
    z-index: 1;
    width: 1200px;
    height: 1200px;
    transform: translateX(-50%);
    border-radius: 100%;
  }
  .user-bg-img {
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-image: url('@/static/images/tw.png');
    background-size: 100%;
    background-repeat: no-repeat;
  }
}

.user-head,
.user-main {
  position: relative;
  z-index: 3;
}

.user-head {
  padding-top: 60rpx;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  .login-btn {
    flex: 1;
    margin-left: 32rpx;
    font-size: 34rpx;
    font-weight: 500;
    color: #ffffff;
  }
  .vip-btn {
    width: 171rpx;
    height: 63rpx;
    margin-right: -32rpx;
    background: linear-gradient(270deg, #e1a968 0%, #ffecce 100%);
    border-radius: 32rpx 0 0 32rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #a87941;
    line-height: 63rpx;
    text-align: center;
  }
  .desc {
    flex: 1;
    min-width: 380rpx;
    margin-left: 32rpx;
    .name {
      font-size: 34rpx;
      font-weight: 500;
      color: #ffffff;
    }
    .brief {
      margin-top: 10rpx;
      font-size: 26rpx;
      font-weight: 400;
      color: #ffffff;
    }
  }
}

.user-order {
  margin: 28rpx 30rpx 0;
  background: #ffffff;
  border-radius: 20rpx;
  /deep/.u-section {
    height: 97rpx;
    padding: 0 30rpx;
  }
  .order-text {
    display: block;
    font-size: 28rpx;
    font-weight: 400;
    color: $edu-content-color;
    text-align: center;
    margin-top: 14rpx;
  }
}

.user-main {
  padding: 0rpx 30rpx;
  .user-main__list {
    margin-top: -32rpx;
    padding-top: 32rpx;
    border-radius: 20rpx 20rpx 0 0;
    background-color: #ffffff;
    position: relative;
    z-index: 10;
    .grid-text {
      font-size: 28rpx;
      font-weight: 400;
      color: $edu-content-color;
      margin-top: 16rpx;
    }
  }
}
</style>
